<template>
  <!-- 组件测试页面 -->
  <div class="edit" style="z-index: 10000">
    <div>编辑页面接收到的值： {{ dateString }}</div>
    <div>数据库可用的值： {{ dbDate }}</div>
    <p></p>
    <button @click="getDate">测试返回值</button>
    <div>{{ renderDate }}</div>
    <p></p>
    <DateComponentsVue v-model=dateString ref="DateComponents" v-model:dbDate=dbDate></DateComponentsVue>
    <p></p>
    <div>这行不能改变位置</div>
  </div>
</template>

<script>
import DateComponentsVue from "./DateComponents.vue";

export default {
  components: {
    DateComponentsVue
  },
  data() {
    return {
      dateString: null,
      renderDate: null,
      dbDate: null
    };
  },
  methods: {
    getDate() {
      this.renderDate = this.$refs.DateComponents.renderDate();
    }
  }
};
</script>

<style>
.edit {
  margin: 24px;
}
</style>
